import React, { Component } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Alert } from 'antd';
import Login from '@/components/Login';
import styles from './Login.less';
import SelectSystem from './SelectSystem';

const { UserName, Password, Captcha, Submit } = Login;

@connect(({ login, loading, menu }) => ({
  login,
  captcha: login.captcha,
  submitting: loading.effects['login/userLogin'] || loading.effects['login/fetchAuthorityList'],
  systemList: login.systemList,
  menuData: menu.menuData,
  visableModal: login.visableModal,
}))
class LoginPage extends Component {
  state = {
    type: 'account',
    // autoLogin: true,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'login/isLogin',
    });
  }

  // 获取验证码
  onGetCaptcha = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'login/getCaptcha',
    });
  };

  // 提交
  handleSubmit = (err, values) => {
    if (!err) {
      const { dispatch } = this.props;
      dispatch({
        type: 'login/userLogin',
        payload: {
          ...values,
        },
      });
    }
  };

  // changeAutoLogin = e => {
  // this.setState({
  //   autoLogin: e.target.checked,
  // });
  // };

  renderMessage = content => (
    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
  );

  render() {
    const { submitting, captcha } = this.props;
    const { type } = this.state;
    return (
      <div className={styles.main}>
        <Login
          defaultActiveKey={type}
          onSubmit={this.handleSubmit}
          ref={form => {
            this.loginForm = form;
          }}
          style={{ marginTop: 60 }}
        >
          <UserName
            className={styles.userName}
            name="nutzer"
            placeholder={`${formatMessage({ id: 'app.login.userName' })}`}
            rules={[
              {
                required: true,
                message: formatMessage({ id: 'validation.userName.required' }),
              },
            ]}
            // style={{ marginTop: 50 }}
            // onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
          />
          <Password
            name="senha"
            placeholder={`${formatMessage({ id: 'app.login.password' })}`}
            rules={[
              {
                required: true,
                message: formatMessage({ id: 'validation.password.required' }),
              },
            ]}
            // onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
          />
          <Captcha
            captcha={captcha}
            name="captcha"
            placeholder={formatMessage({ id: 'form.verification-code.placeholder' })}
            countDown={120}
            onGetCaptcha={this.onGetCaptcha}
            getCaptchaButtonText={formatMessage({ id: 'form.get-captcha' })}
            getCaptchaSecondText={formatMessage({ id: 'form.captcha.second' })}
            rules={[
              {
                required: true,
                message: formatMessage({ id: 'validation.verification-code.required' }),
              },
            ]}
            // onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
          />
          {/* <div>
            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
              <FormattedMessage id="app.login.remember-me" />
            </Checkbox>
          </div> */}
          <Submit loading={submitting}>
            <FormattedMessage id="app.login.login" />
          </Submit>
          <SelectSystem {...this.props} />
        </Login>
      </div>
    );
  }
}

export default LoginPage;
